<template>
    <van-nav-bar fixed title="分类" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
        <template #right>
            <van-icon name="search" size="18" to="/" />
        </template>
    </van-nav-bar>
    <div class="tab-lsit">
        <van-sidebar class="cateleft" style="max-height: calc(100v);" v-model="active">
            <van-sidebar-item v-for="item in list" :title="item" @click="tolist(item)" />
        </van-sidebar>
        <div class="cateright">
            <van-tag class="caterright-tag" @click="golist(item.brand)" v-for="item in tablsit" type="primary"
                size="large">{{ item.brand }}</van-tag>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import router from '@/router'
import { categorylist, categorybrandlist } from '../api/pro'
const onClickLeft = () => history.back();
const onClickRight = () => router.push({ name: 'search' })
const active = ref(0);
const list = ref()
const tablsit = ref()

categorylist().then(result => {
    console.log(result)
    list.value = result.data
    categorybrandlist(list.value[0]).then(res => {
        tablsit.value = res.data
    })
})


//  分类
const tolist = (category: string) => {
    categorybrandlist(category).then(res => {
        console.log(res)
        tablsit.value = res.data
    })
}

// 分类详细跳页面
const golist = (brand: string) => {
    console.log(brand)
    router.push(`/list/${brand}`) 
}
</script>

<style>
.cateleft {
    width: 20%;
}

.caterright-tag {
    margin-bottom: 5px;
    text-align: center;
}

.cateright {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50px;
    left: 80px;
}

.tab-lsit {
    margin-top: 50px;
}
</style>